<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link
            href="https://cdn.bootcdn.net/ajax/libs/cesium/1.99.0/Widgets/widgets.css"
            rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/cesium/1.99.0/Cesium.js"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/view-ui-plus/dist/styles/viewuiplus.css">
    <link href="Source/mian/styles/tooltip.css" rel="stylesheet">
    <link href="Source/mian/styles/index.css" rel="stylesheet">
    <link href="Source/mian/SDK/css/sectionStyle.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue@next"></script>
    <script type="text/javascript" src="https://unpkg.com/view-ui-plus"></script>
    <style>
        .hy-menu {
            position: absolute;
            top: 10px;
            left: 10px;
            display: flex;
            border-radius: 5px;
            background-color: rgba(1, 16, 23, 1);

        }

        .hy-menu > .menu-btn {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hy-menu > .menu-btn span {
            /*继承*/
            all: inherit
        }

        .hy-menu > .menu-btn > span > img {
            width: 30px;
            height: 30px;
            cursor: pointer;
        }

        .hy-menu > .hy-menu-ul {
            padding: 0;
            margin: 0;
            width: 0;
            height: 50px;
            transition: all 2s ease-in-out;
            -webkit-transition: all 2s; /* Safari */
        }

        .hy-menu > .hy-menu-ul span {
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        /*.hy-menu-ul-show {*/
        /*    display: flex;*/
        /*    width: 400px !important;*/

        /*    opacity: 0;*/
        /*    transition: all 2s ease-in-out;*/
        /*    -webkit-transition: all 2s; !* Safari *!*/
        /*}*/
        .hy-menu > .hy-menu-ul > li {
            width: 50px;
            height: 50px;
            /*background-color: rgba(1, 16, 23, 0.75);*/
            color: white;
            text-align: center;
            line-height: 50px;
            position: relative;
        }

        .hy-menu > .hy-menu-ul > li > span > img,
        .hy-menu > .hy-menu-ul > li > .sub-ul > li > span > img {
            width: 28px;
            margin-top: 11px;
            cursor: pointer;
        }

        .hy-menu > .hy-menu-ul > li:nth-child(5) > span > img {
            width: 26px;
            margin-top: 12px;
        }

        .hy-menu > .hy-menu-ul > li:nth-child(7) > span > img {
            margin-top: 7px;
            width: 35px;
        }

        .hy-menu > .hy-menu-ul > li:nth-child(8) {
            border-radius: 5px;

        }

        .hy-menu > .hy-menu-ul > li:nth-child(8) > span > img {
            margin-top: 9px;
            width: 32px;
        }

        .hy-menu > .hy-menu-ul > li > .sub-ul {
            width: 100%;
            position: absolute;
            top: 100%;
            padding: 25px 0 0;
            background-color: rgba(1, 16, 23, 1);
        }

        .hy-menu > .hy-menu-ul > li > .sub-ul > li {
            height: 50px;
        }

        .hy-menu > .hy-menu-ul > li > .sub-ul > li:hover {
            background-color: rgba(63, 99, 116, 0.75);
            cursor: pointer;
        }

        /*自定义调试工具样式*/
        .mainPerspective-div {
            position: absolute;
            z-index: 99;
            top: 20%;
        / / left: 76 %;
            height: auto;
            width: 200px;
            /* height: auto; */
            display: flex;
            background-color: rgba(56, 56, 56, 0.46);
            color: #3c3f41;
            border-radius: 10px;
            border: 1px solid #0a2f2f;
            /* width: 300px; */
            /* flex-wrap: wrap-reverse; */
            flex-direction: column;
            align-items: center;
        }

        .mainPerspective-div img {
            width: 30px;
            height: 30px;
        }

        .mainPerspective-ul {
            width: 100%;
            height: 100%;
        }

        .mainPerspective-ul > li {
            margin-top: 5px;
            border: 1px solid #0d665a;
            width: 100%;
            height: 100%;
            background-color: #0d665a;
            color: #FFFFFF;
        }

        .mainPerspective-ul > li:hover {
            cursor: pointer;
        }

        /*楼层号调整*/
        .floor-data-div {
            position: absolute;
            z-index: 99;
            top: 45%;
        / / left: 3 %;
            height: auto;
            width: auto;
            /* height: auto; */
            display: flex;
            background-color: rgba(56, 56, 56, 0.46);
            color: #3c3f41;
            border-radius: 10px;
            border: 1px solid #0a2f2f;
            /* width: 300px; */
            /* flex-wrap: wrap-reverse; */
            flex-direction: column;
            align-items: center;
        }

        #floor-number-ul > li {
        / / width: 250 px;
            height: 30px;
            margin: 10px;
        / / border: 1 px solid #0a2f2f;
            border-radius: 10px;
            display: flex;
        / / font-size: 3 px;
        }

        #floor-number-ul > li > div {
            color: #FFFFFF;
            width: 30px;
            height: 30px;
            border: 1px solid #0a2f2f;
            font-size: 10px;
            border-radius: 20px;
            line-height: 30px;
            text-align: center;
        }

        #floor-number-ul > li > input {
            width: 180px;
            height: 30px;
            border: 1px solid #0a2f2f;
            border-radius: 10px;
        }

        #floor-number-ul > li > img {
            width: 30px;
            height: 30px;
            border: 1px solid #0a2f2f;
            border-radius: 10px;
        }
    </style>
    <style>
        /*楼层标签样式*/
        .custom-my-obv-domContainer_floor {
            position: absolute;
            z-index: 99;
            top: 17%;
            right: 20px;
            height: auto;
            width: 50px;
            /* height: auto; */
            display: flex;
            background-color: rgba(56, 56, 56, 0.46);
            color: #3c3f41;
            border-radius: 10px;
            /* border: 1px solid red; */
            /* width: 300px; */
            /* flex-wrap: wrap-reverse; */
            flex-direction: column;
            align-items: center;
        }

        .full-menu-full {
            top: calc((100% - 228px) / 2) !important;
            left: 10px !important;
        }

        .mainPerspective {
            position: absolute;
            z-index: 99;
            top: 120%;
            height: 50px;
            width: 50px;
            /* height: auto; */
            display: flex;
            /*background-color: rgba(56, 56, 56, 0.46);*/
            color: #3c3f41;
            border-radius: 10px;
            /* border: 1px solid red; */
            /* width: 300px; */
            /* flex-wrap: wrap-reverse; */
            flex-direction: column;
            align-items: center;
        }

        .mainPerspective img {
            width: 30px;
            height: 30px;
        }

        /*楼层标签样式*/
        .custom-my-obv-domContainer_floor ol {
            padding: 0 !important;
        }

        /*楼层标签样式*/
        .custom-my-obv-domContainer_floor li {
            /*border:1px solid red;*/
            list-style-type: none;
            height: 30px;
            width: 30px;
            margin: 5px 0;
            color: #e3e3e3;
            background-color: rgba(46, 46, 46, 0.95);
            border: 1px solid #a09f9f;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

        /*楼层标签样式*/
        .custom-my-obv-domContainer_floor li:hover {
            background-color: #02b58a;
            color: white;
        }

        /*楼层标签样式*/
        .custom-my-obv-domContainer_floor-checked {
            background-color: #02b58a !important;
            color: white !important;
        }

        .alarm-floor {
            background-color: transparent !important;
            background-image: url("/Source/Images/ces/alarm-bg.png");
            background-size: 100% 100%;
            z-index: -1;
            /*background: transparent radial-gradient(circle at 50% 50%, #ff0008db 0%, rgb(252 43 49) 30%,rgb(252 90 95) 60%, #ff6060 100%) !important;*/
        }

        .hy-copy {
            display: none;
        }
    </style>
    <!--图层样式-->
    <link rel="stylesheet" type="text/css" href="/Source/mian/SDK/css/layer.css">
    <link rel="stylesheet" type="text/css" href="/Source/mian/SDK/css/labelSettings.css">
    <link rel="stylesheet" type="text/css" href="/Source/mian/SDK/css/mapSettings.css">
    <link rel="stylesheet" type="text/css" href="/Source/mian/SDK/css/attributeQuery.css">
    <link rel="stylesheet" type="text/css" href="/Source/mian/SDK/css/viewpoint.css">
    <link rel="stylesheet" type="text/css" href="/Source/mian/SDK/css/searchComponent.css">
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="vueContainer">
</div>
<template id="content">
    <!--  菜单  -->
    <div class="hy-menu" style="position:absolute; top: 10px">
        <div class="menu-btn">
            <span tooltip="菜单" id="0">
                 <img src="/Source/Images/ces/toolMenu.png" alt="">
            </span>
        </div>
        <ul class="hy-menu-ul" style="display: none">
            <li>
                <span tooltip="剖切" id="1">
                   <img src="/Source/Images/ces/sectioning.png" alt="">
                </span>
                <ul class="sub-ul" style="display: none">
                    <li @click="startPlaneClippingEvent">
                            <span tooltip="平剖" placement="right" id="11">
                                <img
                                        class="sub-img"
                                        src="/Source/Images/ces/flat-section.png"
                                        alt="平剖"></span>
                    </li>
                    <li @click="startVerticalClippingEvent">
                            <span tooltip="立剖" placement="right" id="12">
                                <img class="sub-img"
                                     src="/Source/Images/ces/vertical-section.png"
                                     alt="立剖">
                            </span>
                    </li>
                    <li @click="startBoxClippingEvent">
                            <span tooltip="体剖" placement="right" id="13">
                                <img class="sub-img"
                                     src="/Source/Images/ces/box-cutting.png"
                                     alt="体剖">
                            </span>
                    </li>
                </ul>
            </li>
            <li>
                <span tooltip="测量" id="2">
                 <img src="/Source/Images/ces/measure.png" alt="">
                </span>
                <ul class="sub-ul" style="display: none">
                    <li onclick="Open_measurement('line')"><span tooltip="直线" placement="right" id="21"><img
                            class="sub-img"
                            src="/Source/Images/ces/straight-line.png"
                            alt="直线"></span>
                    </li>
                    <li onclick="Open_measurement('perpendicularity')"><span tooltip="垂直" placement="right"
                                                                             id="22"><img
                            class="sub-img"
                            src="/Source/Images/ces/vertical.png"
                            alt="垂直"></span>
                    </li>
                    <li onclick="Open_measurement('high')"><span tooltip="综合测量" placement="right" id="23"><img
                            class="sub-img"
                            src="/Source/Images/ces/vertical.png"
                            alt="综合测量"></span>
                    </li>
                    <li onclick="Open_measurement('area')"><span tooltip="面积" placement="right" id="24"><img
                            class="sub-img"
                            src="/Source/Images/ces/area.png"
                            alt="面积"></span>
                    </li>
                    <li onclick="Open_measurement('multisegment')"><span tooltip="多点测量" placement="right"
                                                                         id="25"><img
                            class="sub-img" src="/Source/Images/ces/comprehensive-measurement.png"
                            alt="多点测量"></span>
                    </li>
                    <li onclick="Editing_model()"><span tooltip="编辑" placement="right" id="26"><img class="sub-img"
                                                                                                      src="/Source/Images/ces/edit.png"
                                                                                                      alt="编辑"></span>
                    </li>
                    <li onclick="Clear_draw()"><span tooltip="清除" placement="right" id="27"><img
                            class="sub-img"
                            src="/Source/Images/ces/clear.png"
                            alt="清除"></span>
                    </li>
                </ul>
            </li>
            <li>
                <span tooltip="展示" id="3">
                   <img src="/Source/Images/ces/exhibition.png" alt="">
                </span>
                <ul class="sub-ul" style="display: none">
                    <li><span tooltip="汇报" placement="right" id="31"><img class="sub-img"
                                                                            src="/Source/Images/ces/simulation.png"
                                                                            alt="汇报"></span>
                    </li>
                    <li><span tooltip="VR" placement="right" id="32">
                        <img class="sub-img" style="width: 30px;margin-top: 14px" src="/Source/Images/ces/VR.png"
                             alt="VR">
                    </span></li>
                    <li onclick="addViewpointPopup()"><span tooltip="视点管理" placement="right" id="33">
                        <img class="sub-img" src="/Source/Images/ces/viewpoint-tour.png" alt="视点管理">
                    </span></li>
                    <!--                    <li><span tooltip="路径漫游" id="34">-->
                    <!--                        <img class="sub-img" src="/Source/Images/ces/path-roaming.png" alt="路径漫游">-->
                    <!--                    </span></li>-->
                </ul>
            </li>
            <li>
                <span tooltip="交流" id="4">
                  <img src="/Source/Images/ces/communication.png" alt="">
                </span>
                <ul class="sub-ul" style="display: none">
                    <li onclick="addLabelPopup()">
                        <span tooltip="标签" placement="right" id="41">
                          <img class="sub-img" src="/Source/Images/ces/label.png" alt="标签">
                        </span>
                    </li>
                    <li>
                        <span tooltip="交流" placement="right" id="42">
                            <img class="sub-img" src="/Source/Images/ces/communication.png" alt="交流">
                        </span>
                    </li>
                </ul>
            </li>
            <li>
                <span tooltip="设置" id="5">
                  <img src="/Source/Images/ces/set.png" alt="">
                </span>
                <ul class="sub-ul" style="display: none">
                    <li>
                        <span tooltip="图层设置" placement="right" id="51">
                          <img class="sub-img" src="/Source/Images/ces/layer-settings.png" alt="图层设置">
                        </span>
                    </li>
                    <li @click="mapSettingsPlane">
                        <span tooltip="地图设置" placement="right" id="52">
                            <img class="sub-img" src="/Source/Images/ces/map-settings.png" alt="地图设置">
                        </span>
                    </li>
                </ul>
            </li>
            <li @click="openLayer">
                <span tooltip="图层" id="6">
                  <img src="/Source/Images/ces/layer.png" alt="">
                </span>
                <ul class="sub-ul" style="display: none; padding-top: 0">
                </ul>
            </li>
            <li onclick="getAttributeData()">
                <span tooltip="属性" id="7">
                   <img src="/Source/Images/ces/attribute.png" alt="">
                </span>
                <ul class="sub-ul" style="display: none;padding-top: 0">
                </ul>
            </li>
            <li onclick="mainPerspective()">
                <span tooltip="主视角" id="8">
                  <img src="/Source/Images/ces/green/visual.png" alt="">
                </span>
                <ul class="sub-ul" style="display: none;padding-top: 0">
                </ul>
            </li>
        </ul>
    </div>
    <!--  楼层  -->
    <div class="custom-my-obv-domContainer_floor">
        <ul class="menu-ul" style="
                padding-left: 0;
            ">
            <li v-for="key of floorData"
                :class="[(alramList.includes(key) &&  isCheckedLi !== key) ? 'alarm-floor' : '', isCheckedLi === key ?'custom-my-obv-domContainer_floor-checked':'']"
                :style="{
                            fontSize: key === '屋顶'?'12px':'16px'
                            }"
                :key="key" @click="planeSection(key)">{{key}}
            </li>
        </ul>
    </div>
    <!--  立剖面板  -->
    <div class="vertical-container" v-show="clippingTemplate.isVerticalClipObj.isVerticalClipOpened">
        <div class="vertical-header">
            <span class="vertical-header-title">立剖</span>
            <span class="vertical-header-close"
                  @click="closeVerticalClippingEvent">×</span>
        </div>
        <div class="vertical-main">
            <div class="vertical-main-top">
                <span :class="{'isChecked': clippingTemplate.isVerticalClipObj.single.status === 1}"
                      @click="()=>changTab(1)">X</span>
                <span :class="{'isChecked': clippingTemplate.isVerticalClipObj.single.status === 2}"
                      @click="()=>changTab(2)">Y</span>
                <span :class="{'isChecked': clippingTemplate.isVerticalClipObj.single.status === 3}"
                      @click="()=>changTab(3)">Z</span>
            </div>
            <div class="vertical-main-item">
                <span>移动</span>
                <Slider
                        show-tip="never" v-model="clippingTemplate.isVerticalClipObj.single.move"
                        :min="clippingTemplate.isVerticalClipObj.single.min"
                        :max="clippingTemplate.isVerticalClipObj.single.max"
                        @on-input="updateData(1)"></Slider>
            </div>
            <div class="vertical-main-item">

                <span>水平旋转</span>
                <Slider show-tip="never"
                        v-model="clippingTemplate.isVerticalClipObj.single.levelX" :min="-180" :max="180"
                        @on-input="updateData(2)"></Slider>
            </div>
            <div class="vertical-main-item">

                <span>垂直旋转</span>
                <Slider show-tip="never" v-model="clippingTemplate.isVerticalClipObj.single.perpendicularityY"
                        :min="-180"
                        :max="180"
                        @on-input="updateData(3)"></Slider>
            </div>
        </div>
        <div class="vertical-bottom">
            <div class="vertical-bottom-item">
                <span
                        @click="()=>controlVertical(1)">{{clippingTemplate.isVerticalClipObj.verticalIsShow ? '显示' : '隐藏'}}</span>
            </div>
            <div class="vertical-bottom-item">
                <span @click="()=>controlVertical(2)">重置</span>
            </div>
        </div>
    </div>
    <!--  构件查询  -->
    <div class="search-component" @click="toggleSearchOptionPanel">
        <div class="search-component-item">
            <i-input search enter-button
                     class="search-component-input"
                     placeholder="请输入搜索内容" v-model="searchTemplate.searchKeyValue"
                     @on-search="searchChange"
                     @on-blur="toggleSearchOptionPanel"></i-input>
        </div>
        <div class="search-component-options" v-show="searchTemplate.searchOptions.status"
        >
            <div class="search-component-options-top">
                构件搜索方案
                <span @click="openPlanPanel">+</span>
            </div>
            <ul class="search-component-options-middle">
                <li v-for="item of searchTemplate.searchOptions.planList" :key="item"
                    @click="()=>appointSearchOption(item)">
                    <img src="Source/Images/ces/area.png" alt="1">
                    <!--                    <Icon type="md-search"/>-->
                    <p :style="{
                        'color': searchTemplate.isCheckedPlan === item.planName ? 'red':'white'
                       }">{{item.planName}}</p>
                </li>
            </ul>
            <teleport to="body">
                <div v-show="searchTemplate.searchOptions.planPanel.status" class="search-component-options-panel">
                    <div class="search-component-options-panel-title">
                        <span class="panel-title-name">创建构件搜索方案</span>
                        <span class="panel-title-close"
                              @click="searchTemplate.searchOptions.planPanel.status = false">×</span>
                    </div>
                    <div class="search-component-options-panel-main">
                        <div class="search-component-options-panel-main-item">
                            <label>方案名称</label>
                            <div class="panel-main-item-i">

                                <i-input v-model="searchTemplate.searchOptions.planPanel.form.planName"
                                         placeholder="方案名称"></i-input>
                            </div>

                        </div>
                        <div class="search-component-options-panel-main-item">
                            <label>观察距离</label>
                            <div class="panel-main-item-i">
                                <input-number v-model="searchTemplate.searchOptions.planPanel.form.distance"
                                              placeholder="观察距离"></input-number>
                            </div>

                        </div>
                        <div class="search-component-options-panel-main-item">
                            <label>是否立即跳达</label>
                            <div class="panel-main-item-i">
                                <i-switch v-model="searchTemplate.searchOptions.planPanel.form.immediate"
                                />
                            </div>
                        </div>
                        <div class="search-component-options-panel-main-item">
                            <label>查询关键字段</label>
                            <div class="panel-main-item-i">

                                <i-select filterable transfer
                                          v-model="searchTemplate.searchOptions.planPanel.form.keyName">
                                    <i-option
                                            v-for="i of searchTemplate.searchOptions.planPanel.keyValueOptions" :key="i"
                                            :value="i">
                                        {{i}}
                                    </i-option>
                                </i-select>
                            </div>
                        </div>
                    </div>
                    <div class="search-component-options-panel-footer">
                        <i-button type="primary" @click="savePanelPlan">保存</i-button>

                    </div>
                </div>
            </teleport>
            <!--   结果面板   -->
            <teleport to="body">
                <div v-show="searchTemplate.searchOptions.componentResult.status"
                     class="search-component-result-panel">
                    <div class="search-component-result-panel-title">
                        <span class="panel-title-name">搜索结果列表</span>
                        <span class="panel-title-close"
                              @click="closeSearchPlan">×</span>
                    </div>
                    <div class="search-component-result-panel-main">
                        <i-table :columns="tableTemplate.columns" height="400" :data="tableTemplate.data"
                                 @on-row-click="oneRowOnClick"
                        ></i-table>
                    </div>
                    <div class="search-component-result-panel-footer">
                        <Page :total="tableTemplate.pageOption.total" :page-size="tableTemplate.pageOption.pageSize"/>
                    </div>
                </div>
            </teleport>
        </div>
    </div>
    <!--  图层管理  -->
    <div class="custom-my-layer" v-show="layerTemplate.status">
        <div>
            <span>图层管理</span>
            <span @click="layerTemplate.status = false" style="cursor: pointer">
                 <img src="/Source/Images/layer/esc.png">
            </span>
            <hr style="color: #e3e3e3">
        </div>
        <!--关闭按钮-->
        <Tree :data="layerTemplate.layerData"
              :render="renderLayerData"
              class="layer-tree"
        ></Tree>
        <teleport to="body">
            <div class="custom-my-layer-setting" v-show="layerTemplate.layerSetting.status">
                <div class="title">
                    <span class="title-name">图层设置</span>
                    <span class="title-close" @click="layerTemplate.layerSetting.status = false">
                         <img src="/Source/Images/layer/esc.png">
                    </span>
                </div>
                <div class="main">
                    <div class="main-center">
                        <div class="main-center-item">
                            <span style="margin-right: -10px">透明度设置：</span>
                            <input-number v-model="layerTemplate.layerSetting.form.opacity" :min="0" :max="1"
                                          :step="0.1"
                                          @on-change="changeCurrentComponentOpacity"/>
                        </div>
                    </div>
                </div>
            </div>
        </teleport>

    </div>
    <!--  地图设置  -->
    <div class="map-setting" v-show="mapTemplate.status">
        <div class="map-setting-header">
            <span class="map-setting-header-title">地图设置</span>
            <span class="map-setting-header-close"
                  @click="mapTemplate.status = false">×</span>
        </div>
        <div class="map-setting-main">
            <div class="map-setting-main-item">
                <div class="item-name">显示地球</div>
                <div class="item-desc">控制地球显示和隐藏</div>
                <div class="item-switch">
                    <i-switch v-model="mapTemplate.mapSetting.globe" @on-change="()=>mapSettings('globe')"></i-switch>
                </div>
            </div>
            <div class="map-setting-main-item">
                <div class="item-name">显示太阳</div>
                <div class="item-desc">控制太阳显示和隐藏</div>
                <div class="item-switch">
                    <i-switch v-model="mapTemplate.mapSetting.sun" @on-change="()=>mapSettings('sun')"></i-switch>
                </div>
            </div>
            <div class="map-setting-main-item">
                <div class="item-name">显示月亮</div>
                <div class="item-desc">控制月亮显示和隐藏</div>
                <div class="item-switch">
                    <i-switch v-model="mapTemplate.mapSetting.moon" @on-change="()=>mapSettings('moon')"></i-switch>
                </div>
            </div>
            <div class="map-setting-main-item">
                <div class="item-name">地球透明</div>
                <div class="item-desc">控制地球是否可以透明</div>
                <div class="item-switch">
                    <i-switch v-model="mapTemplate.mapSetting.globeOpacity"
                              @on-change="()=>mapSettings('globeOpacity')"></i-switch>
                </div>
            </div>
            <div class="map-setting-main-item">
                <div class="item-name">地球底色</div>
                <div class="item-desc">隐藏地球后场景的渲染背景颜色</div>
                <div class="item-switch">
                    <i-switch v-model="mapTemplate.mapSetting.globeBackgroundColor"
                              @on-change="()=>mapSettings('globeBackgroundColor')"></i-switch>
                </div>
            </div>
            <div class="map-setting-main-item">
                <div class="item-name">场景背景色</div>
                <div class="item-desc">隐藏地球后场景的渲染背景颜色</div>
                <div class="item-switch">
                    <color-picker v-model="mapTemplate.mapSetting.sceneBackgroundColor" alpha
                                  @on-change="()=>mapSettings('sceneBackgroundColor')"/>
                </div>
            </div>
            <!--            <div class="map-setting-main-item">-->
            <!--                <div class="item-name">地球透明</div>-->
            <!--                <div class="item-desc">控制地球是否可以透明</div>-->
            <!--                <div class="item-switch">-->
            <!--                    <i-switch v-model="mapTemplate.mapSetting" @on-change="()=>mapSettings('globe')"></i-switch>-->
            <!--                </div>-->
            <!--            </div>-->
        </div>
    </div>
    <!--工具调试-->
    <div class="mainPerspective-div" style="display: none">
        <ul class="mainPerspective-ul">
            <li>
                <input style="width: 140px" id="attributeName" type="text" value="注释" placeholder='请输入属性名'>
                <input style="width: 140px" id="attributeValue" type="text" placeholder='请输入属性值'>
                <div style="width: 43px; height: 43px;float: right;margin: -23px 4px" onclick="">
                    <img style="width: 100%; height: 100%"
                         src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F27%2F20181027115801_oekdz.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701919142&t=c48bd02f2ed01e08a55cfd7fb3ad6607">
                </div>
            </li>
            <li onclick="getTilesetsMap()">图层数据获取</li>
            <li onclick="getSectionPosition()">剖切数据获取</li>
            <li onclick="addViewpoint()">视点数据获取</li>
            <li onclick="bubbleBoxSimulationCreation()">实体气泡框创建</li>
            <li onclick="">位置信息获取</li>
        </ul>
    </div>


</template>
<!--全局变量-->
<script src="Source/mian/SDK/variable.js"></script>
<!--公共方法-->
<script src="Source/mian/SDK/function/shareFunction/shareFunction.js"></script>
<!--初始化模型-->
<script src="Source/mian/SDK/install/install.js"></script>
<!--菜单工具提示-->
<script src="Source/mian/SDK/config/tooltip.js"></script>
<script src="Source/mian/SDK/config/message.js"></script>
<!--测量-->
<script src="Source/mian/SDK/function/measure/measure.js"></script>
<script src="Source/mian/SDK/function/measure/measuringTool.js"></script>
<!--剖切-->
<script src="Source/mian/SDK/function/section/section.js"></script>
<script src="Source/mian/SDK/function/section/plane-cutting.js"></script>
<script src="Source/mian/SDK/function/section/box-cutting.js"></script>
<!--<script src="Source/mian/SDK/function/section/box-cutting-test.js"></script>-->
<script src="Source/mian/SDK/function/section/verticalSection.js"></script>
<!--视点管理操作-->
<script src="Source/mian/SDK/function/viewpoint/viewpoint.js"></script>

<!--模型高度设置-->
<script src="Source/mian/SDK/function/modelHeightSeting/modelHeightSetting.js"></script>
<!--图层设置-->
<script src="Source/mian/SDK/function/layerSettings/layerSettings.js"></script>
<!--属性信息获取-->
<script src="Source/mian/SDK/function/getAttributeData/getAttributeData.js"></script>
<!--标签操作-->
<script src="Source/mian/SDK/function/labelSettings/labelSettings.js"></script>
<!--工具调试-->
<script src="Source/mian/SDK/function/modeFunction/modeFunction.js"></script>
<!--构件查询操作-->
<script src="Source/mian/SDK/function/searchComponent/searchComponent.js"></script>
<!--菜单操作-->
<script>
  let openMenu = null //记录当前展开菜单
  // 获取img数组
  let lis
  let subLis
  // let ischecked = false
  // 重置状态
  const reset = () => {
    for(let j of lis) {
      //全部重置
      if(j.parentNode.getAttribute('tooltip') === '主视角') {
        //
      } else {
        j.setAttribute('src', j.getAttribute('src').replace('/green', ''))
        j.parentNode.nextSibling.style.display = 'none' //关闭二级菜单
      }
    }
  }
  const resetSub = () => {
    for(let j of subLis) {
      //全部重置
      j.setAttribute('src', j.getAttribute('src').replace('/green', ''))
    }
  }
  window.onload = function() {
    lis = document.querySelectorAll('.hy-menu-ul > li > span > img')
    subLis = document.getElementsByClassName('sub-img')
    //菜单点击展开收起
    document.getElementsByClassName('menu-btn')[0].childNodes[0].childNodes[0].addEventListener('click', () => {
      let ul = document.getElementsByClassName('hy-menu-ul')[0]
      reset()
      resetSub()
      openMenu = null
      if(ul.style.display === 'none') {
        // 展开
        ul.style.display = 'flex'
        ul.style.width = '400px'
      } else {
        // 收起
        ul.style.display = 'none'
        ul.style.width = '0'

      }
    })
    //循环监听点击效果
    for(let i of lis) {
      i.addEventListener('click', () => {
        if(i.parentNode.getAttribute('tooltip') === '主视角') {
          return
        }
        if(openMenu === i.parentNode.getAttribute('tooltip')) {
          i.parentNode.nextSibling.style.display = 'none'
          i.setAttribute('src', i.getAttribute('src').replace('/green', ''))
          openMenu = null
          return
        } else {
          openMenu = i.parentNode.getAttribute('tooltip')
        }
        reset()
        //重置
        resetSub()
        //赋值
        i.setAttribute('src', i.getAttribute('src').replace('/Source/Images/ces', '/Source/Images/ces/green'))
        //  展开
        if(i.parentNode.nextSibling) {
          i.parentNode.nextSibling.style.display = 'block'
        }

      })
    }
    for(let i of subLis) {
      i.addEventListener('click', () => {
        // 如果当前的i的属性src包含green,说明是点亮状态，则应该调用resetSub(),否则应该先调用resetSub（），再点亮当前的i
        if(i.getAttribute('src').includes('green')) {
          //重置
          resetSub()
        } else {
          resetSub()
          i.setAttribute('src', i.getAttribute('src').replace('/Source/Images/ces', '/Source/Images/ces/green'))
        }
      })
      // i.addEventListener('mouseover', () => {
      //   if(i.getAttribute('src').includes('green')) {
      //     //  已被点击
      //     ischecked = true
      //   }
      //   if(!ischecked) {
      //     //  未被点击过
      //     //赋值
      //     i.setAttribute('src', i.getAttribute('src').replace('/Source/Images/ces', '/Source/Images/ces/green'))
      //     //  展开
      //     // if(i.nextSibling && i.nextSibling.nextSibling) {
      //     //   i.nextSibling.nextSibling.style.display = 'block'
      //     // }
      //   }
      //
      // })
      // i.addEventListener('mouseout', () => {
      //   if(!ischecked) {
      //     //  未被点击过
      //     i.setAttribute('src', i.getAttribute('src').replace('/green', ''))
      //   }
      //
      // })
    }
    //查询到所有含有 tooltip属性的 dom节点,  鼠标放上去时显示 提示
    const nodeList = document.querySelectorAll('span[tooltip]')
    for(let i of nodeList) {
      i.addEventListener('mouseenter', () => {
        showTooltip(i, i.getAttribute('id') + 'tooltip', i.getAttribute('tooltip'))
      })
    }
  }

</script>
<script>
  // $.get('Source/mode/huanbohai/scenetree.json', function(data) {
  //   console.log('data', data)
  //   //读进了data变量中
  //   //接下来用到data的代码必须全部在此函数内部进行
  //
  // })
</script>
<!--vue加载-->
<script>
  <!-- 初始化vue -->
  const { createApp, ref, reactive, onMounted, onBeforeUnmount, resolveComponent } = Vue
  const app = createApp({
    template: `#content`,
    setup() {
      const message = ref('Hello Vue.js!')
      const transparencyValue = ref(1)
      const imgSrc = ref('')
      const isCheckedLi = ref('')
      const floorData = reactive(['1F', '2F', '3F'])
      const alramList = reactive([])// 数组用来存放报警楼层
      //剖切对象
      const clippingTemplate = reactive({
        //平剖功能
        isPlaneClipOpened: false,
        // 立剖对象
        isVerticalClipObj: {
          status: false, //面板隐藏
          isVerticalClipOpened: false,//立剖功能
          verticalIsShow: false, //控制立剖面板 显隐的切换 true显示 false 隐藏
          single: {
            move: 0.0,
            levelX: 0.0,
            perpendicularityY: 0.0,
            type: 1,
            min: -170,
            max: 170,
            status: 2
          }
        },
        // 体剖功能
        isBoxClipOpened: false
      })

      // 搜索对象
      const searchTemplate = reactive({
        searchKeyValue: '',
        searchOptions: {
          status: false,
          planPanel: {//搜索方案面板
            status: false,
            form: {
              planName: '',
              distance: 40,
              keyName: '',
              immediate: false

            },
            keyValueOptions: {
              status: false

            }//下拉
          },
          componentResult: {},//结果面板

          planList: [
            {
              planName: '标高',
              distance: 10,
              keyName: '标高',
              immediate: true
            }, {
              planName: '注释',
              distance: 5,
              keyName: '注释',
              immediate: false
            }
          ],
          currentSearchOption: {
            planName: '',
            distance: 40,
            keyName: '',
            immediate: false
          } //当前指定的搜索配置
        },
        isCheckedPlan: null //选中某个方案
      })

      //表格对象
      const tableTemplate = reactive({
        columns: [],
        oldColumns: [
          {
            title: '序号',
            key: 'no',
            width: '80px'
          },
          {
            title: '编号',
            key: 'id',
            tooltip: true,
            width: '200px'

          }
        ],
        data: [
          {
            no: 1,
            id: 'asadaih-daff113fad'
          }
        ],
        pageOption: { // 分页配置
          total: 100,
          pageSize: 6

        }
      })

      // 图层对象
      const layerTemplate = reactive({
        // 图层浮窗
        status: false,
        layerData: [],
        layerSetting: {
          status: false, //图层设置弹窗
          item: null,
          form: {
            opacity: 1
          }
        }
      })
      // 地图（场景）对象
      const mapTemplate = reactive({
        // 地图浮窗
        status: false,
        //地图设置配置项
        mapSetting: {
          sun: true,
          moon: true,
          skyBox: true,
          skyAtmosphere: true,
          globe: true,
          backgroundColor: Cesium.Color.LIGHTSTEELBLUE
        }
      })
      /**
       * @description 渲染图层数据
       * @param {*}
       */
      const renderLayerData = (h, { root, node, data }) => {
        // console.log('root', root)
        // console.log('node', node)
        // console.log(data)
        let visible
        if(data.visible) {
          visible = 'eyes-open'
        } else {
          visible = 'eyes-close'
        }
        return h('div', {
          style: {
            width: '100%'
          },
          onClick(event) {
            event.stopPropagation()
            if(!data.children || !data.children.length) {
              //定位构件
              // flyTo3dTiles(data.id, {
              //   immediate: true, //是否立刻飞到目标位置
              //   distance: 20
              // })
              set3dTileColor(tileset, {
                alpha: 0.1
              })
              //方式一
              setTimeout(() => {

                // 还原构件颜色
                restoreComponentColor(data.id)
                // 构件闪烁
                // setComponentTwinkle(data.id, {
                //   alpha: 1
                // })
              }, 200)

            }
          }
        }, [
          h('div', {
            style: {
              marginRight: '16px'
            }

          }, [
            h('img', {
              src: `/Source/Images/${visible}.png`,
              style: {
                width: '20px',
                height: '20px',
                marginRight: '6px',
                verticalAlign: 'middle'

              },
              onClick: (event, a, b) => {
                console.log('data', data)
                console.log('recordTilesetData', recordTilesetData)
                event.stopPropagation()
                // 改变自身状态
                data.visible = !data.visible

                if(data.parentIndex !== 0) {
                  //  不是根节点
                  // 需判断是否需要更改其其父级状态
                  isChangeParentStatus(data)
                } else {
                  console.log('?????????????????', recordTilesetData.get(data.name).tileset)
                  set3dTileColor(recordTilesetData.get(data.name).tileset, {
                    alpha: data.visible ? 1 : 0
                  })
                }
                // 首先判断点击的项是否有子级
                if(data.children && data.children.length) {
                  //  有子级
                  //  需更改其子集状态
                  changeLayerStatus(data.children, data.visible)
                  if(data.parentIndex === 0) {
                    // 是根节点,模型整体显影
                    // set3dTileColor(tileset, {
                    //   alpha: data.visible ? 1 : 0
                    // })
                  }

                } else {
                  //  叶子结点
                  setComponentColor(data.id, {
                    alpha: data.visible ? 1 : 0
                  })
                }

              }
            }),
            h('span', {
              style: {
                display: 'inline-block',
                maxWidth: '160px',
                color: 'white',
                // overflow: 'hidden'
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap'
              }
            }, data.title),
            h(resolveComponent('Icon'), {
              // 设置图层
              type: 'ios-settings',
              style: {
                float: 'right',
                color: 'white',
                marginRight: '8px',
                lineHeight: '30px'
              },
              onClick(event) {
                event.stopPropagation()
                // 切换图层设置弹窗
                if(data.parentIndex === 0) {
                  //  根节点才可以设置模型颜色
                  layerTemplate.layerSetting.status = !layerTemplate.layerSetting.status
                  if(layerTemplate.layerSetting.status) {
                    //  打开状态
                    // 记住当前点击项
                    layerTemplate.layerSetting.item = data
                  }
                }

              }
            }),
            h(resolveComponent('Icon'), {
              // 定位图层
              type: 'ios-paper-plane',
              style: {
                float: 'right',
                color: 'white',
                marginRight: '8px',
                lineHeight: '30px'
              },
              onClick(event) {
                event.stopPropagation()
                // 切换图层设置弹窗
                // if(data.parentIndex === 0) {
                flyToComponent({
                  position: globalTilesetArr[0].boundingSphere.center,
                  duration: 1.5, // 1.5s
                  heading: Cesium.Math.toRadians(30),
                  pitch: Cesium.Math.toRadians(-90.0),
                  roll: 0.0,
                  distance: globalTilesetArr[0].boundingSphere.radius + 80,
                  viewMatrix: Cesium.Matrix4.IDENTITY,
                  immediate: false //立刻飞到目标位置
                })
                // } else {
                //   // data.parentNode.parentIndex
                // }
                // layerTemplate.layerSetting.status = !layerTemplate.layerSetting.status
                // if(layerTemplate.layerSetting.status) {
                //   //  打开状态
                //   console.log('aaaaaaaa', data)
                //   // 记住当前点击项
                //   layerTemplate.layerSetting.item = data
                // }
              }
            })
          ])
        ])
      }

      /**
       * @description 改变图层状态
       * @param data 源数据
       * @param status 状态
       */
      const changeLayerStatus = (data, status) => {
        if(data instanceof Array && data?.length) {
          data.map((item) => {
            item['visible'] = status
            all3dTilesObjArr[item.id] && (all3dTilesObjArr[item.id].show = status)
            changeLayerStatus(item.children, status)
          })
        }
      }
      /**
       * @description 判断是否更改父级状态
       * @param data 源数据
       */
      const isChangeParentStatus = (data) => {
        console.log('data.parentNode', data.parentNode)
        //只要有一个显示
        let state = data.parentNode.children.some((item) => item['visible'] === true)
        console.log('state', state)
        if(state) {
          //显示
          data.parentNode.visible = true
        } else {
          data.parentNode.visible = false

        }
        if(data.parentNode.parentIndex === 0) {
          set3dTileColor(recordTilesetData.get(data.parentNode.name).tileset, {
            alpha: data.parentNode.visible ? 1 : 0
          })
          return
        }
        // 顺着指针链找上去更改父级状态
        isChangeParentStatus(data.parentNode)
      }
      /**
       * @description 打开图层
       * @param {*}
       */
      const openLayer = () => {
        layerTemplate.status = !layerTemplate.status
        let layerTilesetData = getLayerData(layerTemplate.id)
        layerTilesetData && layerLabelinformationOrgenization({
          children: layerTilesetData
        })
        layerTemplate.layerData = layerTilesetData
        // 用来判断该节点为根节点

        layerTilesetData.forEach((item) => {
          item.parentIndex = 0
        })

      }

      /**
       * @description 更改当前构件透明度
       * @param num
       */
      const changeCurrentComponentOpacity = (num) => {
        console.log('aaaaaaaaaa', num)
        if(layerTemplate.layerSetting.item.parentIndex === 0) {

          set3dTileColor(recordTilesetData.get(layerTemplate.layerSetting.item.name).tileset, {
            alpha: num
          })
          return
        }
        if(layerTemplate.layerSetting.item) {
          console.log(1111)
          if(!layerTemplate.layerSetting.item.children || !layerTemplate.layerSetting.item.children.length) {
            //  没有子级
            setComponentColor(layerTemplate.layerSetting.item.id, {
              alpha: num
            })
          } else {
            console.log(222)

            setColorCallback(layerTemplate.layerSetting.item, num)
          }

        }

      }
      /**
       * @description 設置图层颜色回調
       * @param data 数据源
       * @param num
       */
      const setColorCallback = (data, num) => {
        data.children.map((i) => {
          if(!i.children || !i.children.length) {
            console.log(3333)

            //  没有子级
            setComponentColor(i.id, {
              alpha: num
            })
          } else {
            setColorCallback(i, num)
          }
          // setComponentColor(i.id, {
          //   alpha: num
          // })
        })
      }
      /**
       * @description 搜索触发方法
       * @param {*}
       */
      const searchChange = () => {
        // console.log('searchTemplate.searchOptions.currentSearchOption.keyName, searchTemplate.searchKeyValue', searchTemplate.searchOptions.currentSearchOption.keyName, searchTemplate.searchKeyValue)
        // 查询满足条件的构件
        let arr = searchComponentAll(searchTemplate.searchOptions.currentSearchOption.keyName, searchTemplate.searchKeyValue)
        // let arr = searchComponentAll('标高', '5')
        // 组装一下结果面板表格数据
        tableTemplate.columns = JSON.parse(JSON.stringify(tableTemplate.oldColumns))
        tableTemplate.columns.push({
          title: searchTemplate.searchOptions.currentSearchOption.keyName,
          key: searchTemplate.searchOptions.currentSearchOption.keyName,
          tooltip: true,
          width: '260px'

        })

        tableTemplate.data = arr.map((item, index) => {
          return {
            no: index + 1,
            ...item
          }
        })
        searchTemplate.searchOptions.componentResult.status = true
      }
      /**
       * 判断是否是 某个dom 的子集元素
       * @param val 自己
       * @param parent 目标父级
       * @return {boolean|boolean|*}
       */
      const searchParentIs = (val, parent) => {
        // 参数不完整
        if(!(val && parent)) {
          return false
        }
        // 等于body，找到头了，结束
        if(val === document.body) {
          return false
        }
        // 找到啦
        if(val === parent) {
          return true
        } else {
          // 往父指针链继续查找
          return searchParentIs(val.parentNode, parent)
        }
      }
      const blurInputSearh = (e) => {
        let result = searchParentIs(e.target, document.getElementsByClassName('search-component')[0])
          || searchParentIs(e.target, document.getElementsByClassName('search-component-options-panel')[0])
          || searchParentIs(e.target, document.getElementsByClassName('search-component-result-panel')[0])
        if(!result) {
          searchTemplate.searchOptions.status = false
          // 移除 body的点击事件
          document.body.removeEventListener('click', blurInputSearh)
        }
      }
      /**
       * @description 显隐搜索配置面板
       * @param e
       */
      const toggleSearchOptionPanel = (e) => {
        let input = document.getElementsByClassName('search-component-input')[0].getElementsByClassName('ivu-input ivu-input-default')[0]
        if(e.type === 'click' && input === e.target) {
          searchTemplate.searchOptions.status = true
          setTimeout(() => {
            document.body.addEventListener('click', blurInputSearh)

          }, 0)
        }
      }
      /**
       * 打开构件搜索方面面板
       */
      const openPlanPanel = () => {
        searchTemplate.searchOptions.planPanel.form = {
          planName: '',
          distance: 20,
          keyName: ''
        }
        searchTemplate.searchOptions.planPanel.status = true
        searchTemplate.searchOptions.planPanel.keyValueOptions = all3dTilesFieldNameArr
        //
      }
      /**
       * @description 关闭面板
       * @param {*}
       */
      const closeSearchPlan = () => {
        //退出构件查询
        existComponetSearch()
        // 打开地球
        setSceneOptions({
          globe: true,
          skyBox: true,
          skyAtmosphere: true
          // backgroundColor: Cesium.Color.SEASHELL
        })
        //关闭面板
        searchTemplate.searchOptions.componentResult.status = false
        console.log('globalTilesetArr[0]', globalTilesetArr[0])
        flyToComponent({
          position: globalTilesetArr[0].boundingSphere.center,
          duration: 1.5, // 1.5s
          heading: Cesium.Math.toRadians(30),
          pitch: Cesium.Math.toRadians(-90.0),
          roll: 0.0,
          distance: globalTilesetArr[0].boundingSphere.radius + 80,
          viewMatrix: Cesium.Matrix4.IDENTITY,
          immediate: false //立刻飞到目标位置
        })
      }
      /**
       * 保存搜索构件方案
       */
      const savePanelPlan = () => {
        let res = Object.values(searchTemplate.searchOptions.planPanel.form).some((item) => !!item === false)
        if(res) {
          usemessage().warning('请输入完整信息')
          return
        }
        searchTemplate.searchOptions.planList.push(
          JSON.parse(JSON.stringify(searchTemplate.searchOptions.planPanel.form))
        )
        console.log('searchTemplate.searchOptions.planPanel.form', searchTemplate.searchOptions.planPanel.form)
        //关闭面板
        searchTemplate.searchOptions.planPanel.status = false
      }
      /**
       * @description 指定搜索条件
       * @param item 搜索条件对象
       */
      const appointSearchOption = (item) => {
        console.log('item', item)
        searchTemplate.isCheckedPlan = item.planName
        searchTemplate.searchOptions.currentSearchOption = JSON.parse(JSON.stringify(item))
        console.log('searchTemplate.searchOptions.currentSearchOption ', searchTemplate.searchOptions.currentSearchOption)

      }
      /**
       * 构件结果面板单行点击
       * 描述：点击某个构件，定位过去
       * 参数：
       * @param item 构件对象
       * @param index 下标
       * 返回值：无
       * 参考网址：无
       */
      const oneRowOnClick = (item, index) => {
        setSceneOptions({
          globe: false,
          skyBox: false,
          skyAtmosphere: false
          // backgroundColor: Cesium.Color.SEASHELL
        })
        //设置模型颜色
        for(let i = 0; i < globalTilesetArr.length; i++) {
          set3dTileColor(globalTranslationArr[i], { alpha: 0.05 })
        }
        //设置构件颜色闪烁
        setComponentTwinkle(item.id)
        //定位构件
        flyTo3dTiles(item.id, {
          immediate: searchTemplate.searchOptions.currentSearchOption.immediate,
          // distance: searchTemplate.searchOptions.currentSearchOption.distance
          distance: 5
        })
      }

      /**
       * @description 地图设置面板开关
       * @param {*}
       */
      const mapSettingsPlane = () => {
        mapTemplate.status = !mapTemplate.status

      }
      /**
       * @description 地图设置配置项
       * @param {*}
       */
      const mapSettings = () => {
        // mapTemplate.

      }

      /**
       * 平面楼层剖切
       * 描述：将平面剖切进行改进，对剖切参数w进行修改进行平面上下剖切
       * 参数：
       * @param floorNo 楼层编号
       * 返回值：无
       * 参考网址：无
       */
      const planeSection = (floorNo) => {
        switch(floorNo) {
          case'1F':
            createAFlatSection(5.2)
            break
          case '2F':
            createAFlatSection(8.4)
            break
          case '3F':
            createAFlatSection(13)
            break
        }
        isCheckedLi.value = floorNo
        console.log(111111, floorNo)
      }
      /**
       * 开启和关闭平剖
       */
      const startPlaneClippingEvent = () => {
        exitAllClipping(1)
        // 开启和关闭平剖
        clippingTemplate.isPlaneClipOpened = !clippingTemplate.isPlaneClipOpened
        console.log('startClippingEvent', clippingTemplate.isPlaneClipOpened)
        if(clippingTemplate.isPlaneClipOpened) {
          //  开启
          HorizontalSection()
        } else {

          exitCutting()
        }
      }
      /**
       * 开启和关闭立剖
       */
      const startVerticalClippingEvent = () => {
        exitAllClipping(2)
        // 开启和关闭立剖
        clippingTemplate.isVerticalClipObj.isVerticalClipOpened = !clippingTemplate.isVerticalClipObj.isVerticalClipOpened
        if(clippingTemplate.isVerticalClipObj.isVerticalClipOpened) {
          //开启立剖
          clippingTemplate.isVerticalClipObj.single.move = VS_move
          clippingTemplate.isVerticalClipObj.single.levelX = VS_levelX
          clippingTemplate.isVerticalClipObj.single.perpendicularityY = VS_perpendicularityY
          clippingTemplate.isVerticalClipObj.single.type = VS_type
          clippingTemplate.isVerticalClipObj.single.status = VS_status
          clippingTemplate.isVerticalClipObj.single.min = VS_min
          clippingTemplate.isVerticalClipObj.single.max = VS_max
          VS_loadTileset()
        } else {
          // 撤销立剖
          VS_clearCutting()
        }
        // controlVerticalSection(clippingTemplate.isVerticalClipOpened)

      }
      /**
       * 关闭立剖
       */
      const closeVerticalClippingEvent = () => {
        clippingTemplate.isVerticalClipObj.isVerticalClipOpened = false
        resetSub()
        // 撤销立剖
        VS_clearCutting()
      }
      /**
       * @description 控制面板底部按钮func
       * @param type 类型 1 显隐 ；2 重置
       */
      const controlVertical = (type) => {
        clippingTemplate.isVerticalClipObj.verticalIsShow = type
        if(type === 1) {
          developPlan()
        } else {
          changTab(clippingTemplate.isVerticalClipObj.single.status)
        }
      }
      /**
       * 切换选项卡：改变 x y z的轴向
       * @param type x->1,y->2,z->3
       */
      const changTab = (type) => {
        clippingTemplate.isVerticalClipObj.single.status = type
        VS_move = clippingTemplate.isVerticalClipObj.single.move = 0.0
        VS_levelX = clippingTemplate.isVerticalClipObj.single.levelX = 0.0
        VS_perpendicularityY = clippingTemplate.isVerticalClipObj.single.perpendicularityY = 0.0
        VS_status = clippingTemplate.isVerticalClipObj.single.status
        VS_change(type)
      }
      /**
       * 拖动滑动条
       * @param type
       */
      const updateData = (type) => {
        if(type === 1) {
          VS_levelX = clippingTemplate.isVerticalClipObj.single.levelX = 0.0
          VS_perpendicularityY = clippingTemplate.isVerticalClipObj.single.perpendicularityY = 0.0
          // VS_change(clippingTemplate.isVerticalClipObj.single.status)
        } else {
          VS_move = clippingTemplate.isVerticalClipObj.single.move = 0.0
        }
        clippingTemplate.isVerticalClipObj.single.type = type
        VS_move = clippingTemplate.isVerticalClipObj.single.move
        VS_levelX = clippingTemplate.isVerticalClipObj.single.levelX
        VS_perpendicularityY = clippingTemplate.isVerticalClipObj.single.perpendicularityY
        VS_type = clippingTemplate.isVerticalClipObj.single.type
        VS_type = type
      }
      /**
       * 开启和关闭体剖
       */
      const startBoxClippingEvent = () => {
        exitAllClipping(3)
        // 开启和关闭体剖
        clippingTemplate.isBoxClipOpened = !clippingTemplate.isBoxClipOpened
        // console.log('startClippingEvent', clippingTemplate.isPlaneClipOpened)
        if(clippingTemplate.isBoxClipOpened) {
          //  开启
          createSection()
        } else {
          deleteSection()
        }
      }
      /**
       * 退出所有剖切
       * @param own 不退自己
       */
      const exitAllClipping = (own) => {
        if(clippingTemplate.isPlaneClipOpened && own !== 1) {
          //  平剖开启的，先关掉
          exitCutting()
          clippingTemplate.isPlaneClipOpened = false
        }
        if(clippingTemplate.isBoxClipOpened && own !== 3) {
          //  体剖开启的，先关掉
          deleteSection()
          clippingTemplate.isBoxClipOpened = false
        }
        if(clippingTemplate.isVerticalClipObj.isVerticalClipOpened && own !== 2) {
          //  立剖开启的，先关掉
          VS_clearCutting()
          clippingTemplate.isVerticalClipObj.isVerticalClipOpened = false
        }

      }
      /**
       * @description:改变可见性
       * @return {*}
       * @param val
       */
      const changeVisible = (val) => {
        console.log(val)
      }
      /**
       * @description:改变滑块数据
       * @param {*}
       * @return {*}
       */
      const updateSliderData = (val) => {
        console.log('值是', val)
      }
      //挂载完成执行的程序
      onMounted(() => {
        //

      })
      //销毁组件
      onBeforeUnmount(() => {
        // vue程序销毁时，需要清理相关资源
        console.log('程序注销')
      })
      return {
        message,
        imgSrc,
        isCheckedLi,
        floorData,
        transparencyValue,//透明度
        alramList,// 数组用来存放报警楼层
        clippingTemplate,
        searchTemplate,
        tableTemplate,
        layerTemplate,
        mapTemplate,
        renderLayerData,
        openLayer,
        changeCurrentComponentOpacity,
        searchChange,
        toggleSearchOptionPanel,
        openPlanPanel,
        savePanelPlan,
        appointSearchOption,
        closeSearchPlan,
        oneRowOnClick,
        mapSettingsPlane,// 地图设置面板
        mapSettings,
        planeSection,
        startPlaneClippingEvent, //平剖切
        startVerticalClippingEvent, //垂直切
        closeVerticalClippingEvent, //关闭立剖
        updateData,
        changTab,
        controlVertical,
        startBoxClippingEvent, //体剖切
        changeVisible,
        updateSliderData

      }
    },
    // 1.2 资源销毁
    beforeDestroy() {
      // vue程序销毁时，需要清理相关资源
    }
  })
  app.use(ViewUIPlus)
  app.mount('#vueContainer')
</script>
</body>
</html>
